<template>
	<view class="offerBlock ss-flex">
		<view class="offerBlock-left ss-p-10 ss-flex-1 ss-flex">
			<view class="left-cyq ss-flex-1 ss-flex-col ss-col-center ss-row-center" @click="onTap(data.btn2)">
				<image class="btn-img" :src="sheep.$url.cdn(data.btn2.src)" />
				<div class="btn1-title ss-line-1" :style="{ color: data.btn2.title.color }">
					{{ data.btn2.title.text }}
				</div>
			</view>
			<div class="left-btn ss-flex-1 ss-flex ss-flex-col ss-row-between">
				<view class="btn"  @click="onTap(data.btn1)">
					<view class="iconBox">
						<image class="iconBox-bg1" :src="sheep.$url.cdn('/static/icon/hj.gif')" />
						<image class="iconBox-bg2" :src="sheep.$url.cdn('/static/icon/yuanbg.gif')" />
					</view>
					<div class="btn-title ss-line-2" :style="{ color: data.btn1.title.color }">
						{{ data.btn1.title.text }}
					</div>
				</view>
				<view class="btn"  @click="onTap(data.btn3)">
					<image class="btn-img" :src="sheep.$url.cdn(data.btn3.src)" />
					<div class="btn-title ss-line-1" :style="{ color: data.btn3.title.color }">
						{{ data.btn3.title.text }}
					</div>
				</view>
			</div>
		</view>
		<view class="offerBlock-right ss-p-10 ss-flex-1 ss-m-l-10">
			<view class="topBox ss-flex ss-col-bottom">
				<view class="topBox-title"> 特价团 </view>
				<view class="topBox-subtitle"> 低价热抢中 </view>
			</view>
			<view class="tginfo ss-m-t-20">
				<swiper class="swiperBox" :autoplay="true">
					<swiper-item  v-for="item in state.tjList" :key="item.id + 'tg'">
						<view class="swiper-itemBox ss-flex" @click="sheep.$router.go('/pages/merchant/groupBuying',{
			id:item.indexGoods[0].id
		})">
							<image class="tg-img" :src="sheep.$url.cdn(item.indexGoods[0].image)" />
							<view class="tg-info ss-m-l-12 ss-flex-col ss-row-between">
								<view class="info-title ss-line-2">
									{{item.name + '|' + item.indexGoods[0].title}}
								</view>
								<view class="info-price ss-flex ss-col-bottom">
									￥{{item.indexGoods[0].price.length>1 ? item.indexGoods[0].price.join('~'):item.indexGoods[0].price[0]}}
									<view class="info-price-line" v-if="item.indexGoods[0]?.original_price">
										￥{{item.indexGoods[0]?.original_price}}
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 图片组件
	 */
	import sheep from '@/sheep';
	import { onLoad } from '@dcloudio/uni-app';
	import tgAPI from '@/sheep/api/tuangou';
	import { reactive, onMounted } from 'vue';
	import merchantApi from '@/sheep/api/merchant';
	const location = sheep.$store('location')
	// 接收参数
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
	const state = reactive({
		tjList: [],
	});
	onMounted(() => {
		getSpecialOffer();
	});
	/**
	 * 获取特价团商品
	 */
	async function getSpecialOffer() {
		let { error,data} = await merchantApi.merchantList({
			keyword:'',
			lng: location.myPosition.longitude,
			lat: location.myPosition.latitude,
			list_rows: 4
		})
		if (error == 0) {
			state.tjList = data.data.filter(g=>g.indexGoods.length);
		}
	}
	function onTap(item){
		  // #ifdef MP-WEIXIN
		  if(item.isMp == 1){
			  uni.navigateToMiniProgram({
			    appId: item.appid,
			    path: item.path,
			    envVersion:'release',
			    complete(res) {
			      // 打开成功
			      console.log('navigateToMiniProgram',res);
			    },
			  });
		  }else{
			  sheep.$router.go(item.url)
		  }
		  // #endif
		  // #ifdef APP
		  if(item.isMp == 1){
			  console.log('item',item)
			  openMiniProgram(item.id)
			  return
		  }
		  sheep.$router.go(item.url)
		  // #endif
		  // #ifdef H5
		  sheep.$router.go(item.url)
		  // #endif
	}
	function openMiniProgram (miniId) {
		if(!miniId)return
	  plus.share.getServices(
	    (service) => {
	      let sweixin = service.find((s) => s.id == 'weixin');
	      //判断是否有微信
	      if (sweixin) {
	        //唤起微信跳转小程序
	        sweixin.launchMiniProgram(
	          {
	            id: miniId,
	          },
	          (res) => console.log('微信小程序唤起成功'),
	          (err) => {
	            console.log('微信唤起失败', err);
	            showMsg('微信唤起失败，请检查是否有微信应用');
	          },
	        );
	      } else {
			  console.log('service',service)
	        showMsg('微信唤起失败，请检查是否有微信应用');
	      }
	    },
	    function (e) {
	      console.log('微信唤起失败', e);
	      showMsg('微信唤起失败，请重试');
	    },
	  );
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	.offerBlock {
		height: 180rpx;
		.offerBlock-left {
			height: 100%;
			border-radius: 10rpx;
			background: #fffffd;
			.left-cyq {
				height: 100%;
				.btn-img{
					width: 75rpx;
					height: 75rpx;
					border-radius: 4rpx;
				}
		
				.btn1-title {
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #191919;
				}
			}
			.iconBox {
				position: relative;
				width: 75rpx;
				min-width: 75rpx;
				height: 75rpx;
				overflow: hidden;
				.iconBox-bg1 {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 60%;
					transform: translate(-50%, -50%);
					width: 200%;
					height: 200%;
				}
				.iconBox-bg2 {
					position: absolute;
					top: 60%;
					left: 48%;
					transform: translate(-50%, -50%);
					width: 100%;
					height: 100%;
				}
			}
			.left-btn {
				height: 100%;
				.btn {
					display: flex;
					align-items: center;
					.btn-img {
						width: 75rpx;
						height: 75rpx;
						border-radius: 4rpx;
					}
					.btn-title {
						margin-left: 10rpx;
						font-family: Source Han Sans;
						font-size: 26rpx;
						font-weight: normal;
						line-height: normal;
						text-align: center;
						letter-spacing: normal;
						color: #202020;
					}
				}
			}
		}
		.offerBlock-right {
			height: 100%;
			border-radius: 10rpx;
			background: #fffffd;
			.topBox {
				.topBox-title {
					font-family: YouSheBiaoTiHei;
					font-size: 36rpx;
					font-weight: normal;
					line-height: 1;
					text-align: center;
					letter-spacing: normal;
					color: #2f2f2f;
				}
				.topBox-subtitle {
					margin-left: 6rpx;
					padding: 0 10rpx;
					height: 24rpx;
					border-radius: 10rpx;
					background: linear-gradient(271deg, #ff3636 2%, #f6adad 113%);
					font-family: Source Han Sans;
					font-size: 18rpx;
					font-weight: normal;
					line-height: 24rpx;
					text-align: center;
					letter-spacing: normal;
					color: #f4eded;
				}
			}
			.tginfo{
				.swiperBox{
					.swiper-itemBox{
						.tg-img{
							border-radius: 6rpx;
							width: 123rpx;
							min-width: 123rpx;
							height: 101rpx;
						}
						.tg-info{
							height: 101rpx;
							.info-title{
								font-family: Source Han Sans;
								font-size: 24rpx;
								font-weight: 500;
								line-height: normal;
								letter-spacing: normal;
								color: #000000;
							}
							.info-price{
								font-family: Source Han Sans;
								font-size: 24rpx;
								font-weight: 500;
								line-height: normal;
								letter-spacing: normal;
								color: #F6481E;
								.info-price-line{
									font-family: Source Han Sans;
									font-size: 18rpx;
									font-weight: 500;
									line-height: normal;
									letter-spacing: normal;
									text-decoration: line-through;
									color: #BFBFBF;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
